<template>
	<view>
		<view class="flex flex-x-b" :style="{'margin-top':marginT}">
			<view v-for="(arr,arr_index) in old_list" :key="arr_index">
				<!-- <view @tap="toPage('/pages/goods/goods?id=' + item.id)" v-for="(item,index) in arr"
					:key="index"> -->
					<view v-for="(item,index) in arr"
						:key="index">
					<view class="list-item" :style="{height:item.height}" :class="(arr_index == 0 ? 'aa':'bb')">
						<view class="goods-img" style="padding: 14rpx;">
							<image style="width:100%;height:100%;background:#f4f4f4;border-radius: 10rpx;" :src="item.headPortrait"
								mode="aspectFill"></image>
						</view>
						<view class="fs-28 over-line2"
							style="line-height: 40rpx;padding: 0rpx  26rpx 0 26rpx;word-break: break-all;color:#222;">
							{{item.name || ''}}
						</view>

						<template v-if="mode ==1">
							<view class="flex flex-y-center flex-x-b" style="padding:12rpx  20rpx 26rpx 20rpx;">
								<view class="flex-1 flex flex-y-end">
									<view class="flex flex-y-end bold" style="color: #333333;line-height: 36rpx;">
										<view class="fs-36 " style="color:#333;">¥</view>
										<view class="fs-34 " style="color:#333;">{{item.price || '0'}}</view>
									</view>
									
								</view>
								<!-- <view class="fs-24 color-999999 pr-20">
									<text class="">{{item.purchaseQuantity || '0'}}</text>
									人付款
								</view> -->
							</view>
						</template>

					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "list",
		props: {
			list: {
				type: Array,
				default: () => []
			},
			marginT: {
				type: String,
				default: '22rpx',
			},
			height: {
				type: Number,
				default: 460
			},
			mode: {
				type: [String, Number],
				default: 1 //1商品  2 换购
			}
		},
		watch: {
			list: {
				handler(newV, oldV = []) {
					// console.log('newV', newV.length);
					// console.log('oldV', this.old_list_length);

					if (newV.length == 0) {
						this.old_list = [
							[],
							[]
						];
						this.old_list_length = 0;
					} else {
						if (newV.length > this.old_list_length) {

							this.push(newV.filter((val, index) => index + 1 > this.old_list_length));
							this.old_list_length = newV.length;
						}
					}
				}
			}
		},
		data() {
			return {
				old_list: [
					[],
					[]
				],
				old_list_length: 0,
			};
		},
		methods: {
			push(arr) {



				try {
					let left_top = 0;
					let right_top = 0;
					var query = uni.createSelectorQuery().in(this)
					query.selectAll(`.aa`).boundingClientRect().exec(res1 => {

						query.selectAll(`.bb`).boundingClientRect().exec(res => {

							// console.log('res',res);

							// left_top = res[0].length > 0 ? res[0].reduce((a, b) => a.height + b.height) :
							// 0;

							// right_top = res[1].length > 0 ? res[1].reduce((a, b) => a.height + b.height) :
							// 	0;
							res[0].forEach(val => {
								left_top += val.height;
							})
							res[1].forEach(val => {
								right_top += val.height;
							})
							// console.log('left', left_top, right_top);


							////////////////

							let new_arr = [
								[],
								[]
							];

							let index_arr = arr.map((val, index) => {
								return index % 2;
							});

							if (left_top > right_top) {
								let cha = parseInt((left_top - right_top) / uni.upx2px(this.height)) + 1;
								for (let i = 0; i < cha; i++) {
									index_arr.unshift(1);
								}
								// console.log('cha', cha);

							} else if (left_top < right_top) {
								let cha = parseInt((right_top - left_top) / uni.upx2px(this.height)) + 0;
								for (let i = 0; i < cha; i++) {
									index_arr.unshift(0);
								}
								// console.log('cha', cha);
							}

							arr.forEach((val, index) => {
								new_arr[index_arr[index]].push(val);
							})
							this.old_list[0] = this.old_list[0].concat(new_arr[0]);
							this.old_list[1] = this.old_list[1].concat(new_arr[1]);
							this.old_list = this.clone(this.old_list);

							////////////////////////////////////////

						});
					});

				} catch {

				}

			},
		}
	}
</script>

<style lang="scss">
	.list-item {
		border-radius: 16rpx;
		box-shadow: 0px 4rpx 16rpx 0px rgba(46, 44, 41, 0.05);
		background-color: #FFFFFF;
		margin-bottom: 22rpx;
		width: 334rpx;

		.goods-img {
			width: 100%;
			height: 334rpx;
			background-color: #FFF;
			border-radius: 16rpx 16rpx 0 0;
			overflow: hidden;
		}

		.fuku-people {
			font-size: 20rpx;
			color: #999999;
			padding: 0 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 36rpx;
			background: rgba(216, 216, 216, 0.20);
			border-radius: 8rpx;
		}

		.jifen {
			color: #FFFFFF;
			font-size: 22rpx;
			padding: 0 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 32rpx;
			background: #fc0000;
			border-radius: 16rpx 14rpx 0px 16rpx;
		}

		.jifen-num {
			font-size: 28rpx;
			color: #FC0000;
			padding-left: 14rpx;
			font-weight: bold;
		}
	}
</style>